<template>
  <div class="teacher-card" title="try double click OωO" @dblclick="handleClick">
    <transition name="el-zoom-in-center" mode="out-in">
        <component :is="component" 
          :hname="hname" 
          :name="name" 
          :degree="degree" 
          :email="email" 
          :synopsis="synopsis"
          :imgUrl="imgUrl" 
        />
    </transition>
  </div>
</template>

<script>
import TeacherCardA from "./TeacherCardA.vue";
import TeacherCardB from "./TeacherCardB.vue";
export default {
  props: {
    hname: {type:String,default:"老师"},
    name : {type:String},
    degree : {type:String},
    email : {type:String},
    synopsis : {type:String,default:"max 130 char"},
    imgUrl: {type:String,default:"https://dummyimage.com/300x400/ff6a00/fff"},
  },
  data() {
    return {
      component: "TA",
    };
  },
  components: { "TA":TeacherCardA,"TB":TeacherCardB, },
  methods: {
    // enter() { this.component = "TB" },
    // leave() { this.component = "TA" },

    handleClick() {
      console.log("clicked");
      if (this.component === "TA") 
      {
        this.component = "TB";
      }
      else
      {
        this.component = "TA";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.teacher-card{ display: inline-block; margin: 10px 10px;}
</style>
